<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../screenshots/favicon.ico">

    <title>博客模板</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet"> -->
    <link href="blog.css" rel="stylesheet">
  </head>

  <body>

    <div class="container">
      <header class="blog-header py-3">
        <div class="row flex-nowrap justify-content-between align-items-center">
          <div class="col-4 pt-1">
            <a class="text-muted" href="#">订阅</a>
          </div>
          <div class="col-4 text-center">
            <a class="blog-header-logo text-dark" href="#">LvLvFenga</a>
          </div>
          <div class="col-4 d-flex justify-content-end align-items-center">
            <a class="text-muted" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
            </a>
            <a class="btn btn-sm btn-outline-secondary" href="#">登录</a>
          </div>
        </div>
      </header>

      <div class="nav-scroller py-1 mb-2">
        <nav class="nav d-flex justify-content-between">
          <a class="p-2 text-muted" href="#">全世界</a>
          <a class="p-2 text-muted" href="#">美国</a>
          <a class="p-2 text-muted" href="#">技术</a>
          <a class="p-2 text-muted" href="#">设计</a>
          <a class="p-2 text-muted" href="#">文化</a>
          <a class="p-2 text-muted" href="#">商业</a>
          <a class="p-2 text-muted" href="#">政治</a>
          <a class="p-2 text-muted" href="#">法律</a>
          <a class="p-2 text-muted" href="#">科学</a>
          <a class="p-2 text-muted" href="#">健康</a>
          <a class="p-2 text-muted" href="#">个性</a>
          <a class="p-2 text-muted" href="#">旅行</a>
        </nav>
      </div>

      <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
        <div class="col-md-6 px-0">
          <h1 class="display-4 font-italic">长篇特色博客的标题</h1>
          <p class="lead my-3">多行文本，快速有效地通知新读者本帖内容中最有趣的内容。</p>
          <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">继续阅读...</a></p>
        </div>
      </div>

      <div class="row mb-2">
        <div class="col-md-6">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-primary">世界</strong>
              <h3 class="mb-0">
                <a class="text-dark" href="#">特色邮报</a>
              </h3>
              <div class="mb-1 text-muted">十一月 12</div>
              <p class="card-text mb-auto">这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。</p>
              <a href="#">继续阅读</a>
            </div>
            <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
          </div>
        </div>
        <div class="col-md-6">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-success">设计</strong>
              <h3 class="mb-0">
                <a class="text-dark" href="#">职位名称</a>
              </h3>
              <div class="mb-1 text-muted">十一月 11</div>
              <p class="card-text mb-auto">这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。</p>
              <a href="#">继续阅读</a>
            </div>
            <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
          </div>
        </div>
      </div>
    </div>

    <main role="main" class="container">
      <div class="row">
        <div class="col-md-8 blog-main">
          <h3 class="pb-3 mb-4 font-italic border-bottom">
            头条
          </h3>

          <div class="blog-post">
            <h2 class="blog-post-title">博客文章示例</h2>
            <p class="blog-post-meta">一月 1, 2014 <a href="#">标记</a></p>

            <p>这篇博客文章展示了几种不同类型的内容，这些内容通过引导程序得到支持和样式化。基本的排版、图像和代码都受支持。</p>
            <hr>
            <p>与社会相联系 <a href="#">说一句话</a>, 纳西图尔·里迪库勒斯。伊尼安-欧-里奥码头. 佩伦特·奥纳雷（Pellentesquer ornare）在威尼斯的Lacinia码头前庭。 在洛波蒂，我们是圣洁的。圣洁的呼噜坐着发酵。</p>
            <blockquote>
              <p>库拉比图尔·布兰迪·坦帕斯·波特蒂托。 <strong>莫利斯</strong>ornare与欧盟的狮子座。</p>
            </blockquote>
            <p>埃蒂安波特拉 <em>公司</em> 鼹鼠 圣洁的呼噜坐着发酵。埃尼安·拉西尼亚·比宾登教堂</p>
            <h2>头</h2>
            <p>长生不老射手拉库斯-维尔-奥格-劳瑞特-鲁特鲁姆-福西布斯-多尔拍卖行。杜伊斯·莫利斯（Duis Mollis）、埃斯特·非康莫多·卢卡斯（Est Non-Commodo Luctus）、尼西·埃拉特·波特蒂托·利古拉（Nisi Erta Porttitor Ligula）、埃格特·拉西尼亚·奥迪奥（Eget Lacinia Odio莫比·利奥·瑞斯，圣门教堂，厄洛斯的前厅。</p>
            <h3>附加标题</h3>
            <p>与社会的国家彭纳蒂布斯和马格尼是分不开的蒙特斯，纳赛图里迪库卢斯。</p>
            <pre><code>代码块</code></pre>
            <p>埃尼安·拉西尼亚·比宾登教堂伊泰姆·波塔姆·马勒苏达·马格纳·莫利斯·尤伊斯莫德。金丝桃、泰卢斯、乌龟、毛里氏调味品、乌特发酵马萨。</p>
            <h3>附加标题</h3>
            <p>与社会的国家彭纳蒂布斯和马格尼是分不开的蒙特斯，纳赛图里迪库卢斯。埃尼安·拉西尼亚·比宾登教堂伊泰姆·波塔姆·马勒苏达·马格纳·莫利斯·尤伊斯莫德。金丝桃、泰卢斯、乌龟、毛乌龟、乌特酵母菌、马萨、紫罗兰。</p>
            <ul>
              <li>普雷森特库斯马格纳，维尔塞勒里斯克尼斯圣洁等。</li>
              <li>我不</li>
              <li>没有自由</li>
            </ul>
            <p>一些</p>
            <ol>
              <li>列表项1</li>
              <li>列表项2</li>
              <li>列表项3</li>
            </ol>
            <p>圣洁的呼噜坐着发酵。在洛波蒂，我们是圣洁的。</p>
          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">另一篇博客文章</h2>
            <p class="blog-post-meta">十二月 23, 2013 <a href="#">鲍勃</a></p>

            <p>与社会相联系 <a href="#">说一句话</a>, 文章观点</p>
            <blockquote>
              <p>这是另一段落<strong>加粗</strong> 段落文字文字</p>
            </blockquote>
            <p>不知道说点啥</p>
            <p>这也是个段落</p>
          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">New feature</h2>
            <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>

            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <ul>
              <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
              <li>Donec id elit non mi porta gravida at eget metus.</li>
              <li>Nulla vitae elit libero, a pharetra augue.</li>
            </ul>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
          </div><!-- /.blog-post -->

          <nav class="blog-pagination">
            <a class="btn btn-outline-primary" href="#">之前的</a>
            <a class="btn btn-outline-secondary disabled" href="#">新的</a>
          </nav>

        </div><!-- /.blog-main -->

        <aside class="col-md-4 blog-sidebar">
          <div class="p-3 mb-3 bg-light rounded">
            <h4 class="font-italic">关于</h4>
            <p class="mb-0">埃蒂安波特拉 文字描述……</p>
          </div>

          <div class="p-3">
            <h4 class="font-italic">档案室</h4>
            <ol class="list-unstyled mb-0">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>

          <div class="p-3">
            <h4 class="font-italic">Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
            </ol>
          </div>
        </aside><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </main><!-- /.container -->

    <footer class="blog-footer">
      <p>博客模板 <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">回到顶部</a>
      </p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
    <!-- <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="../../orderscript/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="../../orderscript/holder.min.js"></script>
    <script>
      Holder.addTheme('thumb', {
        bg: '#55595c',
        fg: '#eceeef',
        text: 'Thumbnail'
      });
    </script>
  </body>
</html>
